import { Toast } from 'antd-mobile';
import React, { Component } from 'react'
import Header from '../../components/Header'
import { Cartdelete, Cartedit, Cartlist } from '../../http/api'
import Shoplist from './shoplist/shoplist'

export default class Shop extends Component {

    constructor() {
        super();
        this.state = {
            shopList: [],
            // 全选初始值
            allChecked: false,
            isRequest: true
        }
    }
    componentDidMount() {
        this.reqshopList();
        // 1 节流：初始值开关 可以发请求
        this.setState({
            ...this.state,
            isRequest: true
        })
    }
    async reqshopList() {
        let uid = JSON.parse(sessionStorage.getItem("info")).uid
        // 4.打开开关，方便下一次请求
        this.setState({
            ...this.state,
            isRequest: true
        })
        let res = await Cartlist({ uid })
        if (res.data.code === 200) {
            let arr1 = res.data.list[0].content ? res.data.list[0].content : [];
            let arr2 = res.data.list[1].content ? res.data.list[1].content : [];
            let arr = arr1.concat(arr2);

            let { shopList } = this.state;
            arr.forEach((item) => {
                let obj = shopList.find((i) => i.id === item.id);
                item.checked = obj ? obj.checked : false;
            })
            this.setState({
                shopList: arr,
            })
        }
    }
    // 点了某一个的checked
    changeOne(index) {
        let list = [...this.state.shopList]
        list[index].checked = !list[index].checked;
        this.setState({
            ...this.state,
            shopList: list,
            allChecked: list.every(item => item.checked)
        })
    }
    // 点击全选
    changeAll() {
        let newAllChecked = !this.state.allChecked;
        this.setState({
            allChecked: newAllChecked
        })
        let list = [...this.state.shopList]
        list.forEach(item => {
            item.checked = newAllChecked
        })
    }
    // 删除
    async del(id) {
        let res = await Cartdelete({ id })
        if (res.data.code === 200) {
            Toast.info(res.data.msg, 1);
            // 刷新页面
            this.reqshopList()
        }
    }
    // 自减
    async sub(id, num) {
        if (num <= 1) {
            Toast.info("宝贝不能再少了");
            return;
        }
        // 2 判断开关是否开着，开着就可以发请求
        if (this.state.isRequest) {
            // 3 一旦要发请求了，开关 就关掉
            this.isRequest = false
            let res = await Cartedit({
                id,
                type: 1
            })
            if (res.data.code === 200) {
                // 刷新页面
                this.reqshopList()
            }
        }
    }
    // 自增
    async plus(id) {
        let res = await Cartedit({
            id,
            type: 2
        })
        if (res.data.code === 200) {
            // 刷新页面
            this.reqshopList()
        }
    }

    render() {
        let { shopList, allChecked } = this.state;
        let allPrice = shopList.reduce((val, item) => (item.checked ? val += item.price * item.num : val), 0)
        return (
            <div className="shop">
                <Header title="购物车" back></Header>
                {
                    shopList.length > 0 ?
                        <Shoplist
                            shopList={shopList}
                            allPrice={allPrice}
                            sub={(id, num) => this.sub(id, num)}
                            plus={(id) => this.plus(id)} del={(id) => this.del(id)}
                            changeAll={() => this.changeAll()}
                            allChecked={allChecked}
                            changeOne={(index) => this.changeOne(index)}></Shoplist> :
                        <h3 style={{ fontSize: "0.35rem", color: "#FF6040", position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)" }}>购物车竟然是空的~~~</h3>
                }
            </div>
        )
    }
}